<script setup lang="ts">
function selectedValue(value: number) {
    console.log('分值为:', value, '分');
}
</script>
<template>
    <div class="my-2 d-flex">
        <div class="f-rate-text">星星评分</div>
        <f-rate :dark-color="'#f7eca7'" @selected-value="(value:any) => selectedValue(value)"></f-rate>
    </div>

    <div class="my-2 d-flex">
        <div class="f-rate-text">禁用状态</div>
        <f-rate :disabled="true"></f-rate>
    </div>

    <div class="my-2 d-flex">
        <div class="f-rate-text">支持图标颜色修改</div>
        <f-rate
            :icon-class="'f-icon-radiobutton-checked'"
            :light-color="'#54f19f'"
            :dark-color="'#ceeddd'"
            @selected-value="(value) => selectedValue(value)"
        ></f-rate>
    </div>

    <div class="my-2 d-flex">
        <div class="f-rate-text">支持选择半星</div>
        <f-rate
            :icon-class="'f-icon-heart'"
            :enable-half="true"
            :light-color="'red'"
            :dark-color="'#f2bdbd'"
            @selected-value="(value: any) => selectedValue(value)"
        ></f-rate>
    </div>

    <div class="my-2 d-flex">
        <div class="f-rate-text">修改大小</div>
        <f-rate
            :icon-class="'f-icon-star'"
            :size="'extraLarge'"
            :light-color="'#5D89FE'"
            :dark-color="'#c3d3ff'"
            @selected-value="(value) => selectedValue(value)"
        >
        </f-rate>
    </div>
    <div class="my-2 d-flex">
        <div class="f-rate-text">修改个数及分值</div>
        <f-rate
            :size="'extraLarge'"
            :point-system="100"
            :num-of-star="10"
            :icon-class="'f-icon-droplet'"
            :light-color="'blue'"
            :dark-color="'#d0ecf4'"
            @selected-value="(value) => selectedValue(value)"
        ></f-rate>
    </div>
</template>
<style>
.f-rate-text {
    margin: 3px 10px;
    display: block;
}
</style>
